<template>
    <div class="community-post-page">
        <PostNavigator @click-post="addPost" />

        <div class="content">
            <textarea
                v-model="content"
                class="field"
                name
                cols="30"
                rows="10"
                placeholder="说点什么..."
            ></textarea>
        </div>

        <ImgListPreview :images="images" @add-image="chooseImage" />

        <ImgListPicker ref="imgPicker" @change="updatePreviewImages" />

        <div class="footer row">
            <div class="btn-group row">
                <div class="btn btn-img" @click="chooseImage">
                    <img :src="require('@/assets/icon/btn_upload_img.png')" />
                </div>

                <div class="btn btn-img">
                    <img :src="require('@/assets/icon/btn_emoj.png')" />
                </div>

                <div class="btn btn-img">
                    <img :src="require('@/assets/icon/btn_topic.png')" />
                </div>
            </div>

            <div class="num">{{ content.length }}</div>
        </div>
    </div>
</template>

<script>
/* eslint-disable no-dupe-keys */

import PostNavigator from "./components/postNavigator/index";
import ImgListPreview from "./components/imgListPreview/index";
import ImgListPicker from "./components/imgListPicker/index";

import MobileDetect from "mobile-detect";

export default {
    name: "Detail",
    components: {
        PostNavigator,
        ImgListPreview,
        ImgListPicker
    },
    data() {
        return {
            content: "",

            images: [],
            md: null
        };
    },

    computed: {},

    created() {
        this.md = new MobileDetect(window.navigator.userAgent);
    },

    methods: {
        async addPost() {
            let userInfo = this.$store.state.userInfo;
            const req = {
                content: this.content,
                images: [],
                userInfo: {
                    avatarUrl: userInfo.avatarUrl,
                    avatarImg: userInfo.avatarImg,
                    nickName: userInfo.nickName,
                    uid: userInfo.uid,
                    email: userInfo.email,
                    gender: userInfo.gender,
                    location: userInfo.location
                },
                options: {},
                location: {},
                deviceInfo: {},
                likes: [],
                shares: [],
                tags: [],
                recommendInfo: {},
                deviceInfo: {
                    mobile: this.md.mobile()
                }
            };

            const imgPickerComp = this.$refs.imgPicker;

            this.$showLoading();

            // 上传图片
            let imgList = await imgPickerComp.uploadImages();
            req.images = imgList;

            // 发布微博
            this.$cloudApi
                .uploadPostDetail({
                    data: req
                })
                .then(res => {
                    this.$router.push({ path: "/community/index" });
                    this.$hideLoading();
                    this.$showToast("发布成功");
                })
                .catch(err => {
                    this.$hideLoading();
                    this.$showToast("发布失败，请重试");
                });
            console.log("addPost", req, imgList);
        },
        chooseImage() {
            const imgPickerComp = this.$refs.imgPicker;
            imgPickerComp.chooseFile();
        },

        updatePreviewImages(images) {
            this.images = images;
        }
    }
};
</script>


<style lang="less">
.community-post-page {
    width: 100vw;
    min-height: 100vh;
    background: #f5f5f5;
    padding-bottom: 140px;

    .content {
        .field {
            box-sizing: border-box;
            padding: 30px 30px;
        }
    }

    .footer {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        align-items: center;
        padding: 0 30px;

        .btn-group {
            flex: 1 1 auto;
            box-sizing: border-box;
            padding: 20px 30px 20px 0;

            .btn {
                width: 60px;
                margin-right: 60px;
            }
        }

        .num {
            font-size: 30px;
        }
    }
}
</style>